<template>
  <div style="background:#fff;">
    {{provinceTxt}}//{{cityTxt}}//{{countyTxt}}<br/>
    {{provinceIndex}}
      {{cityIndex}}
      {{countyIndex}}
    <mt-popup v-model="popupVisible" position="bottom" class="ll-popup">
      <ul class="popup-btn-grp">
        <li @click="cancel">取消</li>
        <li @click="confirm">确定</li>
      </ul>
      <mt-picker :slots="addressSlots" @change="onAddressChange">
      </mt-picker>
    </mt-popup>
  </div>
</template>

<script>
import {iosProvinces , iosCitys , iosCountys} from './areaData_v2.js';
export default {
  props:{
    areashow:Boolean,
    areaobj:Object
  },
  data () {
    return {
      count:0,
      count1:0,
      popupVisible:false,
      province:[],
      city:[],
      county:[],
      provinceTxt:'',
      cityTxt:'',
      countyTxt:'',
      provinceIndex:'',
      cityIndex:'',
      countyIndex:'',
      addressSlots:[
        {
          flex: 1,
          values: [],
          className: 'slot1',
          textAlign: 'center',
          defaultIndex:0
        },{
          flex: 1,
          values: [],
          className: 'slot3',
          textAlign: 'center',
          defaultIndex:0
        },{
          flex: 1,
          values: [],
          className: 'slot3',
          textAlign: 'center'
        }
      ]
    }
  },
  watch:{
    areashow(newv){
      this.popupVisible = newv;
    },
    popupVisible(newv){
      if(!newv){
        this.$emit('increment')
      }
    },
    provinceTxt(newv,oldv){
      if(newv != oldv && oldv){
        this.checkCity(this.provinceIndex);
      };
    },
    cityTxt(newv,oldv){
      if(newv != oldv && oldv){
        this.checkCounty(this.cityIndex);
      };
    }
  },
  created(){
    var pro='',city='',county='';
    if(this.areaobj.provinceId){
      iosProvinces.forEach((ele,index)=>{
        if(ele.id == this.areaobj.provinceId){
          pro=ele.value;
        }
      });
    };
    if(this.areaobj.cityId){
      iosCitys.forEach((ele,index)=>{
        if(ele.id == this.areaobj.cityId){
          city=ele.value;
        }
      });
    };
    if(this.areaobj.countyId){
      iosCountys.forEach((ele,index)=>{
        if(ele.id == this.areaobj.countyId){
          county=ele.value;
        }
      });
    };
    var obj={
      areaTxt:pro+city+county
    }
    this.$emit('increment',obj)
  },
  mounted() {
    this.$nextTick(() => {
      this.checkProvince();
      this.checkCity();
      this.checkCounty();
    })
  },
  methods:{
    cancel(){
      this.popupVisible=false;
    },
    confirm(){
      var county = this.countyTxt?this.countyTxt:'';
      var obj = {
        provinceId:this.province[this.provinceIndex],
        cityId:this.city[this.cityIndex],
        countyId:this.county[this.countyIndex],
        areaTxt:this.provinceTxt+this.cityTxt+county
      }
      this.$emit('increment',obj)
    },
    checkProvince(){
      iosProvinces.forEach((ele,index)=>{
        this.province.push(ele.id);
        this.addressSlots[0].values.push(ele.value);
        if(ele.id == this.areaobj.provinceId && this.areaobj.provinceId){
          this.addressSlots[0].defaultIndex=index;
        }
      });
    },
    checkCity(index){
      this.city = [];
      this.addressSlots[1].values = [];
      var provinceindex;
      if(index==0 || index){
        provinceindex = index;
      }else{
        provinceindex = this.addressSlots[0].defaultIndex;
      }
      var checkP = this.province[provinceindex];
      iosCitys.forEach((ele,index)=>{
        if (ele.parentId == checkP) {
          this.addressSlots[1].values.push(ele.value);
          this.city.push(ele.id);
        };
      });
      this.city.forEach((ele,index)=>{
        if(ele == this.areaobj.cityId && this.areaobj.cityId){
          this.addressSlots[1].defaultIndex=index;
        }
      })
    },
    checkCounty(index){
      this.county = [];
      this.addressSlots[2].values = [];
      var cityindex;
      if(index==0 || index){
        cityindex = index;
      }else{
        cityindex = this.addressSlots[1].defaultIndex;
      }
      var checkC = this.city[cityindex];
      iosCountys.forEach((ele,index)=>{
        if (ele.parentId == checkC) {
          this.addressSlots[2].values.push(ele.value);
          this.county.push(ele.id);
        };
      });
      this.county.forEach((ele,index)=>{
        if(ele == this.areaobj.countyId && this.areaobj.countyId){
          this.addressSlots[2].defaultIndex=index;
        }
      })
    },
    onAddressChange(picker, values){
      if(this.count < 5){
        this.count=this.count+1;
      }else if(this.count>=5){
        this.provinceIndex = picker.$children[0].valueIndex;
        this.cityIndex = picker.$children[1].valueIndex;
        this.countyIndex = picker.$children[2].valueIndex;
        var arr = picker.getValues();//选中的
        this.provinceTxt = arr[0];
        this.cityTxt = arr[1];
        this.countyTxt = arr[2];
      }
    }
  },
}
</script>
